<template>
	<div style="margin-top: 16px">
		<!-- <el-form-item label="处理用户">
			<el-select v-model="userTaskForm.assignee" @change="updateElementTask('assignee')">
				<el-option v-for="uk in mockData" :key="'user-' + id" :label="uk.name" :value="uk.id" />
			</el-select>
		</el-form-item> -->
		
		
		<!-- <el-form-item label="用户编码" style="display: none;">
			<el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags filterable
				@change="updateElementTask('candidateUsers')">
				<el-option v-for="uk in mockData" :key="'user-' + id" :label="uk.name" :value="uk.id" />
			</el-select>
		</el-form-item>
		<el-form-item label="用户编码">
			<el-input v-model="userTaskForm.code" style="width: 70%;" />
			<el-button style="width: 25%;margin-left: 5%;" @click="getName()">获取</el-button>
		</el-form-item>
		<el-form-item label="用户名称">
			<el-input v-model="userTaskForm.userName" disabled="disabled" />
		</el-form-item> -->
		
		<el-form-item label="审批用户">
			<el-select v-model="userTaskForm.candidateUsers" multiple filterable remote :remote-method="handleMethod"
				@change="updateElementTask('candidateUsers')">
				<el-option v-for="uk in mockData" :label="uk.name + '('+ uk.account+')'" :value="uk.id" />
			</el-select>
		</el-form-item>
		
		<!-- <el-form-item label="指定用户" v-if="types == 2">
			<el-input v-model="userTaskForm.assignee" @change="updateElementTask('assignee')"></el-input>
		</el-form-item> -->
		
		<!-- <el-form-item label="候选分组">
			<el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags
				@change="updateElementTask('candidateGroups')">
				<el-option v-for="uk in mockData" :key="'user-' + id" :label="uk.name" :value="uk.id" />
			</el-select>
		</el-form-item> -->
		<el-form-item label="到期时间" style="display: none;">
			<el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
		</el-form-item>
		<el-form-item label="跟踪时间" style="display: none;">
			<el-input v-model="userTaskForm.followUpDate" clearable @change="updateElementTask('followUpDate')" />
		</el-form-item>
		<el-form-item label="优先级" style="display: none;">
			<el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
		</el-form-item>
	</div>
</template>

<script>
	import {
		selectTSysUserListByOrgid,
		selectTSysUserListByAccount
	} from '@/api/admin.api.js'
	import { supplierSearchUserList, getUserById } from "@/api/activiti/goods";
	
	export default {
		name: "UserTask",
		props: {
			id: String,
			type: String
		},
		data() {
			return {
				defaultTaskForm: {
					assignee: "",
					candidateUsers: [],
					candidateGroups: [],
					dueDate: "",
					followUpDate: "",
					priority: ""
				},
				userTaskForm: {
					userName:[],
					candidateUsers:[],
					assignee:'${user}'
				},
				mockData: [],
				types:0
			};
		},
		watch: {
			id: {
				immediate: true,
				handler() {
					this.bpmnElement = window.bpmnInstances.bpmnElement;
					this.$nextTick(() => this.resetTaskForm());
				}
			},
			userData(val) {
				this.initMockData();
			}
		},
		created() {
			var that = this;
			var deploymentId = that.$route.query.deptId;
			// selectTSysUserListByOrgid ({
			// 	deploymentId:deploymentId
			// }).then(res=>{
			// 	console.log(res);
			// 	that.mockData = res;
			// })
						
			var xxx = this.bpmnElement;
			if(xxx.incoming[0].source.type == 'bpmn:StartEvent'){
				that.types = 1;
			}else{
				that.types = 2;
			}
		},
		mounted() {
			
		},
		methods: {
			getName(){
				var that = this;
				selectTSysUserListByAccount ({
					Account:that.userTaskForm.code
				}).then(res=>{
					console.log(res);
					if(res.length>0){
						that.userTaskForm.userName = res[0].name;
						that.userTaskForm.candidateUsers = [res[0].id];
						that.updateElementTask('candidateUsers')
					}else{
						that.$message({
						  message: '人员查询失败！',
						  type: 'error'
						})
						that.userTaskForm.userName = '';
						that.defaultTaskForm.candidateUsers = [];
					}
				})
			},
			resetTaskForm() {
				for (let key in this.defaultTaskForm) {
					let value;
					if (key === "candidateUsers" || key === "candidateGroups") {
						value = this.bpmnElement?.businessObject[key] ? this.bpmnElement.businessObject[key].split(",") :
						[];
					} else {
						value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
					}
					this.$set(this.userTaskForm, key, value);
				}
			},
			updateElementTask(key) {
				let taskAttr = Object.create(null);
				if (key === "candidateUsers" || key === "candidateGroups") {
					taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key]
					.join() : null;
				} else {
					taskAttr[key] = this.userTaskForm[key] || null;
				}
				window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
			},
			initMockData() {
				this.mockData = [];
				this.userTaskForm.candidateUsers.map(row => {
					getUserById(row).then(res => {
						this.mockData = this.mockData.concat([res]);
					})
				})
			},
			handleMethod(query) {
				if(query != "") {
					supplierSearchUserList(query).then(res => {
						this.mockData = this.mockData.concat(res);
						this.mockData = this.mockData.reduce(function (tempArr, item) {
							if (tempArr.findIndex((ele) => ele.id === item.id) === -1) {
								tempArr.push(item)
							}
							return tempArr
						}, [])
					})
				}
			}
		},
		computed: {
			userData() {
				return this.userTaskForm.candidateUsers;
			}
		},
		beforeDestroy() {
			this.bpmnElement = null;
		}
	};
</script>
